<template>
    <div>
        <div>
            <p>书名<input type="text" v-model="name"></p>
            <p>阅读量<input type="text" v-model="read"></p>
            <p>评论量<input type="text" v-model="commit"></p>
            <p>发行时间<input type="text" v-model="time"></p>
            <p><input type="button" @click="tianjia()" value="添加"></p>
        </div>
        <div>
            <table>
                <tr><td>书名</td><td>阅读量</td><td>评论量</td><td>发行时间</td><td>操作</td></tr>
                <tr v-for="(i,j) in BookSlist" :key="j">
                    <td :class="{aa:j==1,bb:j==0,cc:j==2}">{{i.name}}</td>
                    <td :class="{aa:j==1,bb:j==0,cc:j==2}">{{i.read | bian_K}}</td>
                    <td :class="{aa:j==1,bb:j==0,cc:j==2}">{{i.commit | bian_K}}</td>
                    <td :class="{aa:j==1,bb:j==0,cc:j==2}">{{i.time}}</td>
                    <td>
                        <button @click="upd(id)" >修改</button>
                        <button @click="del()">删除</button>
                    </td>
                </tr>
            </table>
            <button @click="one1()">首页</button>
            <button @click="one2()">上一页</button>
            <button v-for="(p,y) in fylist" :key="y" @click="one3(p)">{{p}}</button>
            <button @click="one4()">下一页</button>
            <button @click="one5()">尾页</button>
        </div>
    </div>
</template>

<script>
import {RI_BookS_create,RI_BookS_show} from '../axios_send/api.js'
export default {
    name:"BookS",
    data(){
        return{
            name:"",
            read:"",
            commit:"",
            time:"",
            p:1,
            BookSlist:[],
            fylist:[],
            ssa:"",
        }
    },
    methods:{
        tianjia(){
            var data ={
                "name":this.name,
                "read":this.read,
                "commit":this.commit,
                "time":this.time,
            }
            RI_BookS_create(data)
            .then(res=>{
                console.log(res)
            })
        },
        BookSshow(){
            var data ={"page":this.p}
            console.log(data);
            
            RI_BookS_show(data)
            .then(res=>{
                    console.log(res)
                    this.BookSlist =res.data,
                    this.fylist = res.fylist,
                    this.ssa = res.ssa
            })
        },
        one1(){
            if(this.p=1){
                this.BookSshow()
            }
        },
        one2(){
            if(this.p>1){
                this.p -= 1
                this.BookSshow()
            }else{
                this.p = 1
                this.BookSshow()
            }
        },
        one3(p){
            this.p = p
            this.BookSshow()
        },
        one4(){
            if(this.p>=this.ssa){
                this.p += this.ssa
            this.BookSshow()
            }else{
                this.p = this.ssa
                this.BookSshow()
            }
        },
        one5(){
            if(this.p = this.ssa){
                this.BookSshow()
            }
        },
        upd(){
            
        },
        del(){

        }
    },
    created(){
        this.BookSshow()
    },
    filters:{
        bian_K(val){
            var num = parseInt(val)
            var bian_1000 = num/1000
            var res_str = String(bian_1000)
            return res_str + "k" 
        }
    }
}
</script>

<style>
    .aa{color: red;}
    .bb{color: pink;}
    .cc{color: seagreen;}
</style>
